<template>
	<section
		id 		= 'pageContent' 
		class 	= 'rel fv wh'
		:class 	= "[_bgcolor, _bgcolor?'r3px':'']"
		:key 	= 'key'
		:style 	= 'style'
	>
		<Title
			v-if 		= 'title' 
			:title 		= 'title' 
			:table 		= 'table' 
			:config		= 'config'
			:loading	= 'loading'
			:refresh 	= 'refresh'
			:back 		= 'back'
		/>
		<template v-if='scroll'>
			<div class='ex rel'>
				<Content 
					:bgcolor 		= 'false'
					:style 			= 'scrollStyle' 
					:id 			= 'id' 
					:scrollbarClass = 'scrollbarClass' 
					:minWidth 		= "minWidth"
					:minHeight 		= 'minHeight'
					:contentClass 	= 'contentClass' 
					:contentStyle 	= 'contentStyle'
				>
					<slot></slot>
				</Content>
			</div>
			<footer class='fxmc p10' :class="[config.footerControls.class, !_bgcolor?'mt5 bcf r3px':'tbor1' ]" v-if='config.footerControls'>
			    <Controls :config='config.footerControls' :loading='loading' :dir='1' size='middle'/>
			</footer>
		</template>
		<template v-else>
			<div class='fv ex rel' :class='contentClass' :style='{minWidth}' :contentStyle='contentStyle'>
				<slot></slot>
			</div>
		</template>
		<Loading v-if='pageLoading' :loading='loading' />
	</section>
</template>

<script setup>
	/* --------------------------- Function --------------------------- */
	import isColor from '@utils/isColor'
	/* --------------------------- Component --------------------------- */
	const Title = $.lazy(()=>import('#tp/title/title.vue'))
	const Content 	= $.lazy(()=>import('@tp/content.vue'))
	const Controls 	= $.lazy(()=>import('#cpt/temp/Controls.vue'))
	const Loading 		= $.lazy(()=>import('@antd/loading.vue'))
	/* --------------------------- props --------------------------- */
	const {bgcolor, style} = defineProps({
		//
		config 			: { type:Object, default:{  } },
		//
		bgcolor 		: { type:[String, Boolean], default:({ config }) => config.bgcolor ?? 'bcf' },
		scrollbarClass 	: { type:[String, Boolean],	default:'scrollbar' },
		scrollStyle		: { type:[ String, Object ], default:({ config }) => config.scrollStyle },
		minWidth		: { type:Number, default: $config.pageMinWidth },
		minHeight		: { type:Number, default: $config.pageMinHeight },
		contentClass	: { type:String, default:({ config }) => config.contentClass },
		contentStyle	: { type:Object, default:({ config }) => config.contentStyle },
		id				: { type:String, default:({ config }) => config.id },
		style			: { type:Object, default:({ config }) => config.style },
		pageLoading 	: { type:Boolean, default:({ config }) => config.pageLoading },
		// title
		title			: { type:String, default:({ config }) => config.title },
		refresh 		: { type:Boolean, default:({ config }) => config.refresh },
		back 			: { type:Boolean, default:({ config }) => config.back },
		loading 		: Boolean,
		titleMode 		: { type:Number, default:({ config }) => config.titleMode },
		// table
		table 			: { type:Object, default:({ config }) => config.tableConfig },
		scroll 			: { type:Boolean, default:({ config }) => config.scroll },
	})
	let key = $ref(0)
	
	let _bgcolor = bgcolor
	let _style = style
	if( isColor(bgcolor) ){
		_bgcolor = ''
		_style = { backgroundColor: bgcolor, ...style}
	}
	
	defineExpose({
		refresh : () => key = key + 1
	})
</script>
